<template>
	<view class="waterfall">
		<view v-for="(item, index) in data.product" :key="index" class="card">
			<!-- <navigator :url="'/pages/productInfo/productInfo?product_id='+item.product_id"> -->
				<view  @click="hand(item)" ref="handRef">
					<img :src="item.image_url" alt="Product Image" class="product_image" />
					<view class="product_info">
						<view class="product_name">{{ item.product_name }}</view>
						<view class="product_descrption">
							<up-text :lines="2" :text="item.description" color="#878787"></up-text>
						</view>
						<view class="product_bottom">
							<view class="product_price">￥{{ item.price }}</view>
							<view class="product_icon">
								<up-icon name="bag" color="#f96c2f" size="28"></up-icon>
							</view>
						</view>
					</view>
				</view>
			<!-- </navigator> -->
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref, warn, watch, watchEffect } from 'vue';
import { GetShelving, GetRecommended, GetProductDataInCategory } from '../../apis/api.js';

const handRef = ref('');
const prop = defineProps({
	sort: Number,
	all: Number,
	search:Array,
	changeType:Number
});


const data = reactive({
	product: ''
});

const hand = (item) => {
	uni.navigateTo({
	    url: '/pages/productInfo/productInfo?product_id=' + item.product_id
	});
	console.log(item.product_id);
};

watchEffect(() => {
	// 获得上架的商品
	console.log(prop);
	// console.log(prop.all);
	if (prop.all == 0) {
		console.log(1);
		GetShelving()
			.then((res) => {
				console.log('成功', res.data);
				data.product = res.data;
			})
			.catch((err) => {
				console.error('失败', err);
			});
	} else if (prop.all == 1) {
		// 获取推荐的商品
		GetRecommended()
			.then((res) => {
				console.log('成功', res.data);
				data.product = res.data;
			})
			.catch((err) => {
				console.error('失败', err);
			});
	} else if (prop.sort) {
		GetProductDataInCategory({
			category_id: prop.sort
		})
			.then((res) => {
				console.log('成功', res.data);
				data.product = res.data;
			})
			.catch((err) => {
				console.error('失败', err);
			});
	}else if(prop.search&&prop.changeType=='0'||prop.changeType==''){
		data.product=[]
		data.product=prop.search
	}else if(prop.search&&prop.changeType=='1'){
		data.product=[]
		// Array.sort()方法是JavaScript中用于对数组元素进行排序的内置方法。 		
		// console.log(prop.search.sort(compareByPrice));
		const sortedArray = prop.search.slice().sort(function(a, b) {
		  return a.price - b.price;
		});
		data.product=sortedArray
	}
});

// 自定义排序函数，按照对象的price属性进行比较
// function compareByPrice(a, b) {
//   return a.price - b.price;
// }


onMounted(()=>{
	
})

</script>

<style lang="less">
.waterfall {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20rpx;
	width: 100%;
}

.card {
	// border: 1px solid #e0e0e0;
	box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
	border-radius: 10rpx;
	
}

.product_image {
	width: 100%;
	height: 300rpx;
	object-fit: cover;
	border-top-left-radius: 10rpx;
	border-top-right-radius: 10rpx;
}

.product_info {
	padding: 8rpx;
	// border: 1px solid red;
		height: 100%;
}

.product_name {
	font-size: 32rpx;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	color: #323334;

}

.product_descrption {
	font-size: 14px;
	color: darkgray;
}

.product_price {
	// margin: 0;
	color: #f96c2f;
	font-size: 36rpx;
}
.product_bottom {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0rpx;
	align-items: center;
	
	
}
.product_icon {
}
</style>
